<template>
	<view class="content">
		<view class="pageHeader">
			余额
			<a class="generalBack" @click="backpage()" hover-class="none"><image src="/static/b-1.png" style="width: 18upx;height: 30upx;"></image></a>
		</view>
		<view style=" padding: 180upx 0upx 22upx;z-index: 9999;width: 100%;position: fixed; background: #fff;   display: block;">
			<view style="position: relative;padding:20upx 30upx;">
				<image src="../../static/a-1.png" style="width: 100%;height: 282upx;"></image>
				<view style="position: absolute;top:0;left: 80rpx;color: #fff;width: 100%;top:60upx">
					<text style="font-size: 30upx;">可用金额</text>
					<view style="margin: 30upx 0 30upx;font-size: 38upx;">￥{{myinfo.balance }}</view>
					<view style="font-size: 28upx;">累计红包收益：￥{{myinfo.red_envelopes }}</view>
				</view>
			</view>
			<view style="position: absolute;top:240upx;right:48upx;">
				<button class="rebtn chargebtn" @click="recharge()">充值</button>
				<button class="rebtn transbtn" @click="withdraw()">提现</button>
			</view>
			<view style="z-index: 9999;background: #fff;padding: 24upx 30upx;font-size: 30upx;font-weight: 600;border-bottom: 1upx solid #D9D9D9;" v-if="balanceLog.length>0">余额记录</view>
		</view>
		<view style="z-index:1;padding: 620upx 0upx 22upx;">
			<scroll-view scroll-y="true" class="scroll-Y" >
				<view v-for="(item, index) in balanceLog" :key="index" style="padding: 22upx 0;font-size: 28upx;margin-bottom:4upx;background-color: #fff;">
					<view style="padding:0 30upx ;">
						<view style="display: flex;align-items: center;justify-content: space-between;">
							<view style="display: flex;">
								<image v-if="item.type == 0" src="../../static/a-2.png" style="width: 36upx;height: 36upx;margin-right: 20upx;"></image>
								<image v-if="item.type == 1" src="../../static/a-3.png" style="width: 36upx;height: 36upx;margin-right: 20upx;"></image>
								<text class="goods-info">{{ item.msg }}</text>
							</view>
							<text style="font-size: 26upx;">{{parseFloat( item.new_integral - item.original_integral).toFixed(2) }}</text>
						</view>
						<view style="display: flex;justify-content: space-between;margin-top: 26upx;padding-left: 56upx;font-size: 24upx;">
							<text>{{ item.add_time_time }}</text>
							
						</view>
					</view>
				</view>

				<view class="loading">{{ loadingText }}</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
import postAjax from '../../API/postAjax.js';


export default {
	data() {
		return {
			userToken: '', // token
			myinfo: {}, //个人信息
			balanceLog: [],			
			page : 1,
			loadingText: '加载中...'
		};
	},

	onShow(options) {
		let that = this;
		that.userToken = uni.getStorageSync('token');
		that.getBalanceList();
		that.getUserInfo();
	},
	methods: {
		// 获取个人信息
		getUserInfo(){			
			let that = this
			postAjax('user/Center',{token:that.userToken},function(data){
				console.log(data)
				if(data.code==0){
					that.myinfo = data.data
				}else{
					that.getUserInfo()
				}
				
			})
		},
		//滚动到底部
		
		onReachBottom:function(){
			this.getBalanceList();
		},
		

		// 返回上一页
		backpage() {
			uni.navigateBack({
				delta: 1
			});
		},
		recharge() {
			uni.navigateTo({
				url: 'recharge'
			});
		},
		withdraw() {
			uni.navigateTo({
				url: 'withdraw'
			});
		},

		//获取订单列表
		getBalanceList() {
			let that = this;
			uni.showNavigationBarLoading();

			let postdata = {
				token: that.userToken,
				page: that.page,
				is_more: 1,
				class: '2,3'
			};
			// 我的订单列表
			let balanceList = [];

			postAjax('UserIntegral/Index', postdata, function(data) {
				if (data.code == 0) {
					balanceList = data.data.data;

					if (balanceList.length > 0) {
						that.balanceLog = that.balanceLog.concat(balanceList);

						that.page++; //每触底一次 page +1
					} else {
						that.loadingText = '已加载全部';
					}

					if(that.balanceLog.length<10){
						that.loadingText = '';
					}
					
				}else{
					that.getBalanceList()
				}
				uni.hideNavigationBarLoading();
			})
		}
	}
};
</script>

<style>
.loading {
	text-align: center;
	line-height: 50px;
	font-size: 30upx;
	color: #666;
}
.content {
	min-height: 100vh;
	background-color: #f9f9f9;
}
.chargebtn {
	color: #1d84e8;
}
.transbtn {
	color: #fff;
	border: 2upx solid #fff;
	background-color: transparent;
	margin-left: 20upx;
}
.pageHeader {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999;
	width: 100%;
	height: 130upx;
	background-color: #1d84e8;
	line-height: 130upx;
	text-align: center;
	font-size: 36upx;
	color: #fff;
	padding-top: 40upx;
	display: block;
}
.generalBack {
	position: absolute;
	top: 40upx;
	left: 30upx;
	display: block;
}
.rebtn {
	display: inline-block;
	font-size: 30upx;
	border-radius: 4upx;
	width: 120upx;
	height: 58upx;
	line-height: 58upx;
	padding: 0;
}
.rebtn::after {
	border: none;
}
.regoodbox {
	z-index: 9999;
	background: red;
	height: 420upx;
	width: 100%;
	display: block;
	padding: 180upx 0upx 22upx;
}
.total-wrap {
	width: 100vw;
	height: auto;
	box-sizing: border-box;
	padding: 20upx;
}
.logistics-title {
	position: relative;
	box-sizing: border-box;
	padding: 16upx 0;
	border-bottom: 2upx solid #eeeeee;
	line-height: 28upx;
	color: #4b4b4b;
	font-size: 26upx;
	font-family: 'PingFangSC-Medium';
	text-align: left;
}
.goods-info{overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2;line-height: 1.5;max-width: 80%;}
</style>
